<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>头部菜单</title>
</head>
<body>
<!-- top-menu -->
<header id="header" class="media">
    <a href="" id="menu-toggle"></a>
    <a class="logo pull-left" href="index.html">瓦尔哈拉 1.0</a>

    <div class="media-body">
        <div class="media" id="top-menu">
            <div class="pull-left tm-icon">
                <a data-drawer="messages" class="drawer-toggle" href="">
                    <i class="sa-top-message"></i>
                    <i class="n-count animated">5</i>
                    <span>消息</span>
                </a>
            </div>
            <div class="pull-left tm-icon">
                <a data-drawer="notifications" class="drawer-toggle" href="">
                    <i class="sa-top-updates"></i>
                    <i class="n-count animated">9</i>
                    <span>更新</span>
                </a>
            </div>


            <div id="time" class="pull-right">
                <span id="hours"></span>
                :
                <span id="min"></span>
                :
                <span id="sec"></span>
            </div>

            <div class="media-body">
                <input type="text" class="main-search">
            </div>
        </div>
    </div>
</header>
<!-- Messages Drawer -->
<div id="messages" class="tile drawer animated">
    <div class="listview narrow">
        <div class="media">
            <a href="">Send a New Message</a>
            <span class="drawer-close">&times;</span>

        </div>
        <div class="overflow" style="height: 254px">
            <div class="media">
                <div class="pull-left">
                    <img width="40" src="/static/img/profile-pics/1.jpg" th:src="@{/img/profile-pics/1.jpg}"
                         alt="">
                </div>
                <div class="media-body">
                    <small class="text-muted">Nadin Jackson - 2 Hours ago</small>
                    <br>
                    <a class="t-overflow" href="">Mauris consectetur urna nec tempor adipiscing. Proin sit amet
                        nisi ligula. Sed eu adipiscing lectus</a>
                </div>
            </div>
            <div class="media">
                <div class="pull-left">
                    <img width="40" src="/static/img/profile-pics/2.jpg" th:src="@{/img/profile-pics/2.jpg}"
                         alt="">
                </div>
                <div class="media-body">
                    <small class="text-muted">David Villa - 5 Hours ago</small>
                    <br>
                    <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod
                        nunc quis gravida. Suspendisse pharetra</a>
                </div>
            </div>
            <div class="media">
                <div class="pull-left">
                    <img width="40" src="/static/img/profile-pics/3.jpg" th:src="@{/img/profile-pics/3.jpg}"
                         alt="">
                </div>
                <div class="media-body">
                    <small class="text-muted">Harris worgon - On 15/12/2013</small>
                    <br>
                    <a class="t-overflow" href="">Maecenas venenatis enim condimentum ultrices fringilla. Nulla
                        eget libero rhoncus, bibendum diam eleifend, vulputate mi. Fusce non nibh pulvinar,
                        ornare turpis id</a>
                </div>
            </div>
            <div class="media">
                <div class="pull-left">
                    <img width="40" src="/static/img/profile-pics/4.jpg" th:src="@{/img/profile-pics/4.jpg}"
                         alt="">
                </div>
                <div class="media-body">
                    <small class="text-muted">Mitch Bradberry - On 14/12/2013</small>
                    <br>
                    <a class="t-overflow" href="">Phasellus interdum felis enim, eu bibendum ipsum tristique
                        vitae. Phasellus feugiat massa orci, sed viverra felis aliquet quis. Curabitur vel
                        blandit odio. Vestibulum sagittis quis sem sit amet tristique.</a>
                </div>
            </div>
            <div class="media">
                <div class="pull-left">
                    <img width="40" src="/static/img/profile-pics/1.jpg" th:src="@{/img/profile-pics/1.jpg}"
                         alt="">
                </div>
                <div class="media-body">
                    <small class="text-muted">Nadin Jackson - On 15/12/2013</small>
                    <br>
                    <a class="t-overflow" href="">Ipsum wintoo consectetur urna nec tempor adipiscing. Proin sit
                        amet nisi ligula. Sed eu adipiscing lectus</a>
                </div>
            </div>
            <div class="media">
                <div class="pull-left">
                    <img width="40" src="/static/img/profile-pics/2.jpg" th:src="@{/img/profile-pics/2.jpg}"
                         alt="">
                </div>
                <div class="media-body">
                    <small class="text-muted">David Villa - On 16/12/2013</small>
                    <br>
                    <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod
                        nunc quis gravida. Suspendisse pharetra</a>
                </div>
            </div>
            <div class="media">
                <div class="pull-left">
                    <img width="40" src="/static/img/profile-pics/3.jpg" th:src="@{/img/profile-pics/3.jpg}"
                         alt="">
                </div>
                <div class="media-body">
                    <small class="text-muted">Harris worgon - On 17/12/2013</small>
                    <br>
                    <a class="t-overflow" href="">Maecenas venenatis enim condimentum ultrices fringilla. Nulla
                        eget libero rhoncus, bibendum diam eleifend, vulputate mi. Fusce non nibh pulvinar,
                        ornare turpis id</a>
                </div>
            </div>
            <div class="media">
                <div class="pull-left">
                    <img width="40" src="/static/img/profile-pics/4.jpg" th:src="@{/img/profile-pics/4.jpg}"
                         alt="">
                </div>
                <div class="media-body">
                    <small class="text-muted">Mitch Bradberry - On 18/12/2013</small>
                    <br>
                    <a class="t-overflow" href="">Phasellus interdum felis enim, eu bibendum ipsum tristique
                        vitae. Phasellus feugiat massa orci, sed viverra felis aliquet quis. Curabitur vel
                        blandit odio. Vestibulum sagittis quis sem sit amet tristique.</a>
                </div>
            </div>
            <div class="media">
                <div class="pull-left">
                    <img width="40" src="/static/img/profile-pics/5.jpg" th:src="@{/img/profile-pics/5.jpg}"
                         alt="">
                </div>
                <div class="media-body">
                    <small class="text-muted">Wendy Mitchell - On 19/12/2013</small>
                    <br>
                    <a class="t-overflow" href="">Integer a eros dapibus, vehicula quam accumsan, tincidunt
                        purus</a>
                </div>
            </div>
        </div>
        <div class="media text-center whiter l-100">
            <a href="">
                <small>VIEW ALL</small>
            </a>
        </div>
    </div>
</div>
<!-- Notification Drawer -->
<div id="notifications" class="tile drawer animated">
    <div class="listview narrow">
        <div class="media">
            <a href="">Notification Settings</a>
            <span class="drawer-close">&times;</span>
        </div>
        <div class="overflow" style="height: 254px">
            <div class="media">
                <div class="pull-left">
                    <img width="40" src="/static/img/profile-pics/1.jpg" th:src="@{/img/profile-pics/1.jpg}"
                         alt="">
                </div>
                <div class="media-body">
                    <small class="text-muted">Nadin Jackson - 2 Hours ago</small>
                    <br>
                    <a class="t-overflow" href="">Mauris consectetur urna nec tempor adipiscing. Proin sit amet
                        nisi ligula. Sed eu adipiscing lectus</a>
                </div>
            </div>
            <div class="media">
                <div class="pull-left">
                    <img width="40" src="/static/img/profile-pics/2.jpg" th:src="@{/img/profile-pics/2.jpg}"
                         alt="">
                </div>
                <div class="media-body">
                    <small class="text-muted">David Villa - 5 Hours ago</small>
                    <br>
                    <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod
                        nunc quis gravida. Suspendisse pharetra</a>
                </div>
            </div>
            <div class="media">
                <div class="pull-left">
                    <img width="40" src="/static/img/profile-pics/3.jpg" th:src="@{/img/profile-pics/3.jpg}"
                         alt="">
                </div>
                <div class="media-body">
                    <small class="text-muted">Harris worgon - On 15/12/2013</small>
                    <br>
                    <a class="t-overflow" href="">Maecenas venenatis enim condimentum ultrices fringilla. Nulla
                        eget libero rhoncus, bibendum diam eleifend, vulputate mi. Fusce non nibh pulvinar,
                        ornare turpis id</a>
                </div>
            </div>
            <div class="media">
                <div class="pull-left">
                    <img width="40" src="/static/img/profile-pics/4.jpg" th:src="@{/img/profile-pics/4.jpg}"
                         alt="">
                </div>
                <div class="media-body">
                    <small class="text-muted">Mitch Bradberry - On 14/12/2013</small>
                    <br>
                    <a class="t-overflow" href="">Phasellus interdum felis enim, eu bibendum ipsum tristique
                        vitae. Phasellus feugiat massa orci, sed viverra felis aliquet quis. Curabitur vel
                        blandit odio. Vestibulum sagittis quis sem sit amet tristique.</a>
                </div>
            </div>
            <div class="media">
                <div class="pull-left">
                    <img width="40" src="/static/img/profile-pics/1.jpg" th:src="@{/img/profile-pics/1.jpg}"
                         alt="">
                </div>
                <div class="media-body">
                    <small class="text-muted">Nadin Jackson - On 15/12/2013</small>
                    <br>
                    <a class="t-overflow" href="">Ipsum wintoo consectetur urna nec tempor adipiscing. Proin sit
                        amet nisi ligula. Sed eu adipiscing lectus</a>
                </div>
            </div>
            <div class="media">
                <div class="pull-left">
                    <img width="40" src="/static/img/profile-pics/2.jpg" th:src="@{/img/profile-pics/2.jpg}"
                         alt="">
                </div>
                <div class="media-body">
                    <small class="text-muted">David Villa - On 16/12/2013</small>
                    <br>
                    <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod
                        nunc quis gravida. Suspendisse pharetra</a>
                </div>
            </div>
        </div>
        <div class="media text-center whiter l-100">
            <a href="">
                <small>VIEW ALL</small>
            </a>
        </div>
    </div>
</div>
<!-- Breadcrumb -->
<ol id="breadcrumb" class="breadcrumb hidden-xs">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol>
</body>
</html>